<template>
  <div class="home">
    <div class="bg_img">
      <div class="bg_mask"></div>
      <img v-if="bgUrl" :src="bgUrl" />
      <img v-else src="@assets/img/empty.jpg" />
    </div>
    <div class="home_wrap">
      <searchBar :backgroundColor="backgroundColor"></searchBar>
      <pageBanner @bannerChange="bannerChange"></pageBanner>
      <div class="nav_tab">
        <div class="nav_item" v-for="(item,index) in tabList" :key="index" @click="navClick(item)">
          <div class="icon-box" :class="'icon'+index">
            <i class="iconfont" :class="item.icon"></i>
          </div>
          <span>{{item.title}}</span>
        </div>
      </div>
      <div class="ad-box">
        <div class="home_title ad_title">
          <i class="iconfont icon-biaotizuo"></i>
          <div class="txt">我想解决</div>
          <i class="iconfont icon-biaotiyou"></i>
        </div>
        <div class="ad-con">
          <div class="ad-item">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              lazy-load
              :src="'http://yilihui.com/upload/202104/02/202104021057383554.jpg'"
            />
            <div class="ad-txt">面部颜值管理</div>
            <div class="ad-btn">查看推荐<i class="iconfont icon-backout"></i></div>
          </div>
          <div class="ad-item">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              lazy-load
              :src="'http://yilihui.com/upload/201905/09/201905091444135532.jpg'"
            />
            <div class="ad-txt">身体健康管理</div>
            <div class="ad-btn">查看推荐<i class="iconfont icon-backout"></i></div>
          </div>
        </div>
      </div>
      <recommentList></recommentList>
    </div>
    <footerTab></footerTab>
  </div>
</template>

<script>
import footerTab from "@components/footerTab.vue";
import searchBar from "@components/searchBar.vue";
import pageBanner from "./components/pageBanner.vue";
import recommentList from "./components/recommentList.vue";
import { mapActions, mapGetters, mapMutations } from "vuex";  //vuex得各个方法   mapGetters放在computed里面 之后可以在当前页面用 this.userInfo 使用这个全局变量
export default {
  name: "home",
  data() {
    return{
      backgroundColor: "rgba(255,255,255,0)", //头部背景图
      bgUrl:'',
      scroll_:null,
      tabList:[
        {
          title:'天天抽奖',
          url:'/luckdraw',
          icon:'icon-choujiang'
        },
        {
          title:'积分兑换',
          url:'',
          icon:'icon-jifenduihuan'
        },
        {
          title:'邀请好友',
          url:'',
          icon:'icon-yaoqinghaoyou'
        }
        ,
        {
          title:'立即预约',
          url:'',
          icon:'icon-yuyue'
        }
      ]
    }
  },
  components: {
    footerTab,
    searchBar,
    recommentList,
    pageBanner
  },
  created(){

  },
  mounted(){
    this.scroll_ = () => {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      let apl = (scrollTop * 0.0156).toFixed(2);  
      if (Math.abs(apl) > 0.99) {
        this.backgroundColor = "rgba(255,255,255,1)";
        // this.isDown = true;
      } else if (Math.abs(apl) > 0.1) {
        this.backgroundColor = `rgba(255,255,255,${Math.abs(apl)})`;
        // this.isDown = true;
      } else {
        this.backgroundColor = `rgba(255,255,255,0)`;
        // this.isDown = false;
      }
    };
    window.addEventListener("scroll", this.scroll_);
  },
  beforeDestroy() {
    if (this.scroll_) {
      window.removeEventListener("scroll", this.scroll_);
    }
  },
  methods: {
    ...mapMutations({               //set 设置vuex变量得值  也可以用this.$store.commit('setToken','as')  这样设置 setToken需在store/index.js mutations里得定义
      setUserInfo: "setUserInfo",   //设置用户信息
    }),
    bannerChange(imgUrl){
      this.bgUrl = imgUrl;
    },
    //tab点击
    navClick(e){
      if(e.url){
        this.$router.push({path:e.url})
      }else{
        this.$toast({
          message: '敬请期待',
          icon: 'clock-o',
        });
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.home{
  min-height: 100vh;
  position: relative;
  background-size: contain;
  padding-top: 1.08rem;
  background: #f2f2f2;
  .bg_img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 4.6rem;
    width: 100%;
    overflow: hidden;
    border-radius: 0 0 100% 100% / 0% 0% 10% 10%;
    .bg_mask {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background: rgba($color: #000, $alpha: 0.2);
    }
    img {
      height: 100%;
      width: 100%;
      display: block;
      // object-fit: cover;
      filter: blur(5px);
      transform: scale(1.1);
    }
  }
  .home_wrap{
    position: relative;
    z-index: 1;
    .nav_tab{
      background-color: #fff;
      padding:0.28rem 0;
      display: flex;
      margin-top: .3rem;
      .nav_item{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 25%;
        .icon-box{
          width: 0.84rem;
          height: 0.84rem;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f2f2f2;
          border-radius: 50%;
          overflow: hidden;
          &.icon0{
            background-image: linear-gradient( 135deg, #FCCF31 10%, #F55555 100%);
          }
          &.icon1{
            background-image: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);
          }
          &.icon2{
            background-image: linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%);
          }
          &.icon3{
            background-image: linear-gradient( 135deg, #90F7EC 10%, #32CCBC 100%);
          }
          i{
            font-size: 0.42rem;
            color: #fff;
          }
        }
        span{
          font-size: .26rem;
          color: #333;
          margin-top: 0.15rem;
        }
      }
    }
    .ad-box{
      padding:0.3rem 0;
      .ad-con{
        padding: 0 0.2rem;
        .ad-item{
          width: 100%;
          position: relative;
          height: 3.2rem;
          border-radius: 0.06rem;
          overflow: hidden;
          margin-bottom: 0.2rem;
          &:last-child{
            margin-bottom: 0;
          }
          .ad-txt{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.46rem;
            color: #fff;
            left: 0.7rem;
            font-weight: bold;
          }
          .ad-btn{
            position: absolute;
            right: 0.5rem;
            bottom: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.26rem;
            height: 0.5rem;
            padding: 0 0.15rem 0 0.18rem;
            border-radius: 0.3rem;
            line-height: 1;
            color: #fff;
            background: #5eb3f6;
            i{
              display: block;
              transform: translateY(-0.01rem);
              font-size: 0.24rem;
            }
          }
        }
      }
      .ad_title{
        background-color: transparent;
      }
      
    }
  }
}
</style>